﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Demo for DIV editor </TITLE>
  <META NAME="Author" CONTENT="Anbert">
 </HEAD>

 <BODY>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
        function Exec(sCmd){        
            var cmd = "",bUserInterface = false,vValue = 0;
            
            switch(sCmd){
                case 'b':
                    cmd = "Bold";
                    break;
                case 'i':
                    cmd = "Italic";
                    break;
                case 's':
                    cmd = "FontSize";
                    vValue = getFontSize(); 
                    break;
                case 'c':
                    cmd = "ForeColor";
                    vValue = getFontColor();
                    break;
                //more........
            }
            document.selection.createRange().execCommand(cmd,bUserInterface,vValue);        
        }
        function execute(cmd){
            document.selection.createRange().execCommand(cmd);
        }
        function getFontSize(){
            return font_size.options[font_size.selectedIndex].value;
        }
        function getFontColor(){
            //it's not a real color,just show how to use the command;
            return "#" + fcolor.style.backgroundColor.toString(16);
        }
        function forecolor(){            
            CDC.ShowColor();        
            var c = CDC.Color;
            var obj = fcolor;
            obj.style.backgroundColor=c;        
            Exec('c');
        }
    //-->
    </SCRIPT>

<BR>

   <button  onclick="Exec('b')"> 粗体 </button> <button  onclick="Exec('i')"> 斜体 </button> 
   <select onchange="Exec('s')" id=font_size><option value=1>一号</option><option value=2>二号</option><option value=3>三号</option><option value=4>四号</option><option value=5>五号</option><option value=6>六号</option><option value=7>七号</option></select>   
   <button id="fcolor" style="width:40;background:black;cursor:hand;" onclick="forecolor();"></button>

   <br /><br />

   <div style="border:solid 1px blue;width:100%;height:300;" contentEditable="true" id="titi">
    随着昨晚中国男篮的最后一枚金牌入账，声势浩大的中国代表团多哈之旅终于结束。在历经15天的激烈比拼后，中国代表团以165金、88银、63铜，共计316枚奖牌的总成绩，遥遥领先亚洲诸国。作为2008北京奥运会的前哨战，多哈亚运会不仅给中国体育健儿提供了宽广的平台，也为失利者找到反思的空间。毕竟，两年之后，北京奥运大戏拉开序幕；四年之后，广州亚运会接踵而至，留给他们的时间并不多......
   </div>

   <form target="_blank" action = "http://www.baidu.com/s" ><input type="hidden" id="wd" name="wd"><input type="submit" onclick="wd.value=titi.innerHTML"></form>

   <OBJECT ID="CDC" CLASSID="CLSID:F9043C85-F6F2-101A-A3C9-08002B2F49FB"></OBJECT>
 </BODY>
</HTML>